<template>
  <div id="aCoursesList" class="bg-fa of">

    <!-- 讲师介绍 开始 -->

    <section class="container">
      <header class="comm-title">

       <h2 class="fl tac">

          <span class="c-333">讲师介绍</span>

        </h2>

      </header>

      <div class="t-infor-wrap">

        <!-- 讲师基本信息 -->

        <section class="fl t-infor-box c-desc-content">

          <div class="mt20 ml20">

            <section class="t-infor-pic">

              <img :src="TeacherList.avatar" style="width: 576px;height: 343px;">

            </section>

            <h3 class="hLh30">

              <span class="fsize24 c-333">{{TeacherList.name}}<span style="padding-left:1.25rem ;">{{TeacherList.career}}</span></span>

            </h3>

            <section class="mt10">

              <span class="t-tag-bg">北京师范大学法学院副教授</span>

            </section>

            <section class="t-infor-txt">

              <p

                class="mt20"

              >{{TeacherList.intro}}</p>
            </section>

            <div class="clear"></div>

          </div>

        </section>

        <div class="clear"></div>

      </div>

      <section class="mt30">

        <div>

         <header class="comm-title all-teacher-title c-course-content">

            <h2 class="fl tac">

              <span class="c-333">主讲课程</span>

            </h2>

            <section class="c-tab-title">

              <a href="javascript: void(0)">&nbsp;</a>

            </section>

          </header>

        <!-- /无数据提示 开始-->

          <section class="no-data-wrap" v-if="courseList.length==0">

            <em class="icon30 no-data-ico">&nbsp;</em>

            <span class="c-666 fsize14 ml10 vam">没有相关数据</span>

          </section>

          <!-- /无数据提示 结束-->

          <article class="comm-course-list" v-else>

            <ul class="of">

              <li v-for="(item,index) in courseList" :key="index">

                <div class="cc-l-wrap">

                  <section class="course-img">
                    <router-link :to="/course/+item.id">
                       <img
                         v-if="isImg(item.cover)"
                         src="@/static/timg.jpg"
                         class="img-responsive "
                         style="width: 257.5px;height: 143.6px;"
                         :alt="item.title"
                       >
                       <img
                         v-else
                         :src="item.cover"
                         class="img-responsive "
                         style="width: 257.5px;height: 143.6px;"
                         :alt="item.title"
                       >
                   </router-link>
                    <div class="cc-mask">

                      <a :href="/course/+item.id" title="开始学习" target="_blank" class="comm-btn c-btn-1">开始学习</a>

                    </div>

                  </section>

                  <h3 class="hLh30 txtOf mt10">

                    <a href="#" title="零基础入门学习Python课程学习" target="_blank" class="course-title fsize18 c-333">{{item.title}}</a>

                  </h3>

                </div>

              </li>


            </ul>
            <div class="clear"></div>
          </article>
        </div>
      </section>
    </section>
    <!-- /讲师介绍 结束 -->
  </div>
</template>
<script>
  import {getTeacherByIds} from '~/http'
export default {
  data(){
    return{
      TeacherList:{},
      courseList:[],
    }
  },
  created() {
    this.getAll()

  },
  methods:{
    getAll(){
      if(this.$route.params.id){
        getTeacherByIds(this.$route.params.id).then(res=>{
          this.TeacherList = res.data.teacher
          this.courseList = res.data.course
           console.log(this.TeacherList)
        })
      }
    },
    isImg(text){

      if(text.includes("https"))return false
       return true
    }
  }
};
</script>
